<%--
  Created by IntelliJ IDEA.
  User: lqs
  Date: 2023/9/30
  Time: 17:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
    <style>
        #head{
            position: relative;
            top: -35px;
        }
    </style>
</head>
<body>

<div id="app">
    <!--    表头-->
    <el-form :inline="true" :model="branchSearchForm" class="demo-form-inline">
        <el-form-item label="">
            <el-select v-model="branchSearchForm.branchid" placeholder="部门">
                <el-option  label="请选择你的店铺"  value=""></el-option>
                <el-option v-for="d in branchSearch" :label="d.branchname" :value="d.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="branchup">查询</el-button>
        </el-form-item>
    </el-form>
    <br>
    <%--   主表头部按钮 --%>
    <div id="head">
    <el-button type="success" @click="newGoods">刷新</el-button>
    </div>
    <%-- 主体表格--%>
    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :cell-style="{color: '#666', fontFamily: 'Arial',fontSize:'15px'}"
            :cell-style="tableCellStyle"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="id"
                label="入库编号"
                width="150">
        </el-table-column>
        <el-table-column
                prop="date"
                label="入库时间"
                width="200">
        </el-table-column>
        <el-table-column
                prop="status"
                label="审核状态"
                width="150">
            <template slot-scope="scope">
                <el-tag
                        type="success"
                        v-if="scope.row.status==1"
                        effect="dark">
                    申请通过
                </el-tag>
                <el-tag
                        type="warning"
                        v-if="scope.row.status==2"
                        effect="dark">
                    审核中
                </el-tag>
                <el-tag
                        type="danger"
                        v-if="scope.row.status==3"
                        effect="dark">
                    申请驳回
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                prop="staff.staffname"
                label="操作员"
                width="150">
        </el-table-column>
        <el-table-column
                prop="branch.branchname"
                label="店名"
                width="150">
        </el-table-column>
        <el-table-column
                prop="dates"
                label="审核时间"
                width="200">
        </el-table-column>
        <el-table-column
                prop="remark"
                label="驳回理由"
                width="150">
        </el-table-column>
        <el-table-column
                label="详细"
                width="150">
            <template slot-scope="scope">
                <el-button
                        @click.native.prevent="upRow(scope.$index, tableData)"
                        type="text"
                        size="small">
                    <el-tag
                            key="详细操作"
                            type='success'
                            effect="dark">
                        详细操作
                    </el-tag>
                </el-button>
            </template>
        </el-table-column>

        <el-table-column
                label="操作"
                width="220">
            <template slot-scope="scope" v-show="showArea">
                <el-button
                        @click.native.prevent="successRow(scope.$index, tableData)"
                        type="text"
                        size="small"
                        v-if="scope.row.status==2"
                        >
                    <el-tag
                            key="审核通过"
                            type='success'
                            effect="dark">
                        审核通过
                    </el-tag>
                </el-button>

                <el-button
                        @click.native.prevent="falseRow(scope.$index, tableData)"
                        type="text"
                        size="small"
                        v-if="scope.row.status==2">
                    <el-tag
                            key="审核驳回"
                            type='success'
                            effect="dark">
                        审核驳回
                    </el-tag>
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页组件：
              @size-change:触发 改变每页显示的记录条数
              @current-change: 改变页码时触发的函数
              current-page: 显示的当前页面
              page-sizes: 页面大小的下拉框
              page-size: 默认每页显示的条数
              total: 总条数
         -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <%--    详细信息弹出层--%>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible1"
            width="70%"
            :before-close="handleClose">
        <el-table
                :data="tableData1"
                border
                style="width: 100%">
            <el-table-column
                    prop="iid"
                    label="入库编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="goodsid"
                    label="商品id"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="goodsname"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="入库数量">
            </el-table-column>
            <el-table-column
                    prop="cprice"
                    label="进价">
            </el-table-column>
            <el-table-column
                    prop="branchname"
                    label="所属分店">
            </el-table-column>
            <el-table-column
                    prop="allprice"
                    label="总价">
            </el-table-column>
        </el-table>

    </el-dialog>

</div>


<script>
    let app = new Vue({
        el:"#app",
        data:{
            //入库信息主表的内容
            tableData:[],
            //勾选的数据
            multipleSelection:[],
            //入库信息表头输入框
            branchSearchForm:{},
            //店铺数据
            branchSearch:[],
            //当前页面
            currentPage:1,
            //页面大小
            pageSize:5,
            //总条数
            total:0,


            //详细操作弹出层
            dialogVisible1:false,
            //详细操作弹出层数据
            tableData1:[],

            showArea:true,
        },
        created(){
            //  初始化商品表格
            this.init();
            this.headselect();
        },
        methods:{
            //初始化
            init() {
                axios.post("/Inlibrary/info?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.branchSearchForm).then(function (resp) {
                    app.tableData = resp.data.data.list;
                    app.total=resp.data.data.total;
                })
            },
            //表头店铺选择下拉框
            headselect(){
                axios.get("/brand/info").then(function (resp){
                    app.branchSearch=resp.data.data
                })
            },
            //选择的数据
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //改变页面数据数量
            handleSizeChange(val){
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.init();
            },
            //改变当前 页面的函数
            handleCurrentChange(val){
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.init();
            },
            //页面刷新按钮
            newGoods(){
                this.init()
            },
            //表头查询按钮
            branchup(){
                this.init();
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                        app.$message('已取消');
                    })
                    .catch(_ => {});
            },



            //详细操作的按钮
            upRow(index, tableData){
                this.dialogVisible1=true;
                axios.get("/Bg/selectAll?id="+tableData[index].id).then(function (resp){
                    app.tableData1=resp.data.data

                })
            },
            //审核通过
            successRow(index, tableData){
                this.$confirm('此操作将通过审核, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(tableData[index])
                    //修改状态
                    axios.get("/Inlibrary/updateInlibrary?id="+tableData[index].id).then(function (){

                    }),
                   //修改库存
                   axios.get("/Bg/updateAll?id="+tableData[index].id).then(function (resp){
                       app.init()

                   })
                    app.showArea=false;

                    this.$message({
                        type: 'success',
                        message: '审核通过!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            falseRow(index, tableData){
                this.$prompt('驳回理由', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',

                }).then(({ value }) => {
                    axios.post("/Inlibrary/updateRemark?id="+tableData[index].id+"&remark="+value).then(function (resp){
                        app.init()

                    })
                    this.$message({
                        type: 'success',
                        message: '驳回成功'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            // 改变某一列单元格背景颜色
            tableCellStyle({ row, column, rowIndex, columnIndex }) {
                let rowBackground = {};

                if (row.taskColor) {
                    if (columnIndex === 2) {
                        rowBackground.background = row.taskColor;
                    } else {
                        rowBackground.background = "#f8f8f8";
                    }
                } else {
                    rowBackground.background = "#ffffff";
                }
                return rowBackground;
            },

        }
    })
</script>
</body>
</html>
